<!-- eslint-disable no-param-reassign -->
<template>
  <div class="h-full">
    <n-space vertical>
      <n-card class="shadow-sm rounded-4px">
        <n-form class="w-full" size="small" inline>
          <n-form-item label="日期:" label-placement="left">
            <n-date-picker
              v-model:value="range"
              type="datetimerange"
              clearable
              :default-time="['00:00:00', '00:00:00']"
            />
          </n-form-item>
          <n-form-item label="工单类型1:" label-placement="left" style="width: 400px">
            <n-select v-model:value="selectedPanelTypes" multiple clearable :options="panelTypes" />
          </n-form-item>
          <n-form-item label="" label-placement="left">
            <n-button type="primary" :on-click="getFinanceFpyData">
              <template #icon><icon-mdi-map-search-outline /></template>
              查询
            </n-button>
          </n-form-item>
        </n-form>
      </n-card>

      <n-card class="rounded-4px shadow-sm">
        <vxe-grid v-bind="fpyOptions"></vxe-grid>
      </n-card>
    </n-space>
  </div>
</template>

<script setup lang="ts">
import { onMounted, reactive, ref } from 'vue';
import type { SelectOption } from 'naive-ui';
import dayjs from 'dayjs';
import type { VxeGridProps } from 'vxe-table';
import { fetchCustomQuery, fetchPanelType } from '@/service/api';

const range = ref<[number, number]>([dayjs().startOf('month').valueOf(), Date.now()]);
const panelTypes = ref<Array<SelectOption>>([]);
const getPanelType = async () => {
  const result = await fetchPanelType();
  if (result.data) {
    const productSpecList: Array<SelectOption> = [];
    result.data.forEach(element => {
      const temp: SelectOption = {
        label: element.enumvalue,
        value: element.enumvalue
      };
      productSpecList.push(temp);
    });
    panelTypes.value = productSpecList;
  }
};
const selectedPanelTypes = ref([]);

const fpyOptions = reactive<VxeGridProps>({
  border: true,
  maxHeight: '550px',
  size: 'mini',
  showFooter: true,
  align: null,
  columnConfig: {
    resizable: true
  },
  columns: [
    {
      field: 'MODELTYPE',
      title: '型号',
      filters: [{ data: { vals: [], sVal: '' } }],
      filterRender: { name: 'FilterContent' }
    },
    {
      title: '工序名称/工序良率',
      children: [
        {
          field: 'DUMOYIELD',
          title: '镀膜良率',
          formatter({ cellValue }) {
            return cellValue === 0 ? '' : `${cellValue}%`;
          }
        },
        {
          field: 'DIANJIAOYIELD',
          title: '点胶良率',
          formatter({ cellValue }) {
            return `${cellValue}%`;
          }
        },
        {
          field: 'DIANJIAOQUANJIANYIELD',
          title: '点胶全检良率',
          formatter({ cellValue }) {
            return `${cellValue}%`;
          }
        },
        {
          field: 'WEITIAOYIELD',
          title: '微调良率',
          formatter({ cellValue }) {
            return `${cellValue}%`;
          }
        },

        {
          field: 'FENGHANYIELD',
          title: '封焊良率',
          formatter({ cellValue }) {
            return `${cellValue}%`;
          }
        },
        {
          field: 'CESHIYIELD',
          title: '测试良率',
          formatter({ cellValue }) {
            return `${cellValue}%`;
          }
        }
      ]
    },
    {
      field: 'FPY',
      title: '直通率',
      formatter({ cellValue }) {
        return `${cellValue}%`;
      }
    }
  ],
  toolbarConfig: {
    buttons: [],
    export: true,
    print: true,
    // zoom: true,
    custom: true
  },
  data: [],
  mergeCells: [],
  exportConfig: {
    remote: false,
    types: ['xlsx'],
    modes: ['current', 'selected', 'all']
  }
});

const getFinanceFpyData = async () => {
  const queryVm: MES.QueryVM = {
    queryId: 'GetFpyDataForReport',
    version: '00001',
    data: {
      STARTTIME: dayjs(range.value[0]).format('YYYYMMDDHHmmss'),
      ENDTIME: dayjs(range.value[1]).format('YYYYMMDDHHmmss'),
      PANELTYPE: selectedPanelTypes.value.join(',')
    }
  };

  const result = await fetchCustomQuery(queryVm);
  if (result.data) {
    const rawData: Array<any> = result.data;
    rawData.forEach(element => {
      // const shangpianYield = Number(element.shangpianyield) === 0 ? 1 : Number(element.shangpianyield);
      const dumoYield = Number(element.DUMOYIELD) === 0 ? 100 : Number(element.DUMOYIELD);
      const dianjiaoYield = Number(element.DIANJIAOYIELD) === 0 ? 100 : Number(element.DIANJIAOYIELD);
      const dianjiaoQuanJianYield =
        Number(element.DIANJIAOQUANJIANYIELD) === 0 ? 100 : Number(element.DIANJIAOQUANJIANYIELD);
      const weitiaoYield = Number(element.WEITIAOYIELD) === 0 ? 100 : Number(element.WEITIAOYIELD);
      const fenghanYield = Number(element.FENGHANYIELD) === 0 ? 100 : Number(element.FENGHANYIELD);
      const ceshiYield = Number(element.CESHIYIELD) === 0 ? 100 : Number(element.CESHIYIELD);
      // eslint-disable-next-line no-param-reassign
      element.FPY = (
        (dumoYield * dianjiaoYield * weitiaoYield * fenghanYield * ceshiYield * dianjiaoQuanJianYield) /
        10000000000
      ).toFixed(2) as string;
    });
    fpyOptions.data = rawData;
  }
};

onMounted(async () => {
  getPanelType();
});
</script>
<style scoped></style>
